<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="base/head.html::static">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>学生考勤管理系统</title>
</head>

<body>
<div class="lyear-layout-web">
  <aside class="lyear-layout-container">

    <!--左侧导航-->
    <aside class="lyear-layout-sidebar" th:include="base/base.html::left"></aside>

    <!--头部信息-->
    <header class="lyear-layout-header" th:include="base/base.html::header"></header>

    <!--页面主要内容-->
    <main class="lyear-layout-content">

      <div class="container-fluid">

        <div class="row"  sec:authorize="hasRole('ROLE_STUDENT')" >
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-primary">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">签到次数</p>
                  <p th:text="${total.nuTo.successApply}" class="h3 text-white m-b-0">102,125.00</p>
                </div>
                <div class="pull-left">
                  <span class="img-avatar img-avatar-48 bg-translucent">
                    <i class="mdi mdi-calendar-check fa-1-5x"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="col-sm-6 col-lg-3">
            <div class="card bg-danger">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">旷课次数</p>
                  <p th:text="${total.nuTo.failApply}" class="h3 text-white m-b-0">920,000</p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-calendar-question fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>

          <div class="col-sm-6 col-lg-3">
            <div class="card bg-success">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">总课程数</p>
                  <p th:text="${total.nuTo.courseNu}" class="h3 text-white m-b-0">34,005,000</p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-animation fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>

          <div class="col-sm-6 col-lg-3">
            <div class="card bg-purple">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">新增留言</p>
                  <p class="h3 text-white m-b-0">153 条</p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
              </div>
            </div>
          </div>
        </div>

        <div  class="row" sec:authorize="hasRole('ROLE_STUDENT')">

          <div class="col-lg-6">
            <div class="card">
              <div class="card-header">
                <h4>课程签到数</h4>
              </div>
              <div class="card-body">
                <canvas class="js-chartjs-bars"></canvas>
              </div>
            </div>
          </div>

          <div class="col-lg-6">
            <div class="card">
              <div class="card-header">
                <h4>每月签到数</h4>
              </div>
              <div class="card-body">
                <canvas class="js-chartjs-lines"></canvas>
              </div>
            </div>
          </div>

        </div>

        <div class="row">

          <div class="col-lg-12">
            <div class="card">
              <div class="card-header">
                <h4>签到信息</h4>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover">
                    <thead>
                    <tr>
                      <th>#</th>
                      <th>课程名字</th>
                      <th>老师名字</th>
                      <th>开始日期</th>
                      <th>截止日期</th>
                      <th sec:authorize="hasRole('ROLE_STUDENT')">操作</th>
                      <th sec:authorize="hasRole('ROLE_TEACHER')">验证码</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="checkWork:${checkWorkList}">
                      <td th:text="${checkWork.checkId}">1</td>
                      <td th:text="${checkWork.courseName}">java基础</td>
                      <td th:text="${checkWork.userName}">周胜</td>
                      <td th:text="${#dates.format(checkWork.timeStart,'yyyy-MM-dd HH:mm')}">10/02/2019</td>
                      <td th:text="${#dates.format(checkWork.timeEnd,'yyyy-MM-dd HH:mm')}">12/05/2019</td>
                      <td sec:authorize="hasRole('ROLE_STUDENT')">
                        <button th:value="${checkWork.checkId}"  class="btn-success btn" onclick="openModal(this)" >
                          签到
                        </button>
                      </td>
                      <td sec:authorize="hasRole('ROLE_TEACHER')" th:text="${checkWork.verCode}">3233</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>




      <!--模态框，提示输入验证码-->
      <div class="modal fade" tabindex="-1" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden='true' data-backdrop='static'>
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">验证码</h4>
            </div>
            <div class="modal-body">
              <input id="verCode" type="text" placeholder="请输入验证码" class="form-control"></input>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary" onclick="saveCheckLog()">签到</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

    </main>
    <!--End 页面主要内容-->
  </aside>
  </div>
</div>

<!--图表插件-->
<script type="text/javascript" th:src="@{/js/Chart.js}"></script>
<script type="text/javascript" th:inline="javascript">
$(document).ready(function(e) {
    var $dashChartBarsCnt  = jQuery( '.js-chartjs-bars' )[0].getContext( '2d' ),
        $dashChartLinesCnt = jQuery( '.js-chartjs-lines' )[0].getContext( '2d' );
    var $dashChartBarsData = {
		labels: [[${total.courseTo.labels}]],
		datasets: [
			{
				label: '签到次数',
                borderWidth: 1,
                borderColor: 'rgba(0,0,0,0)',
				backgroundColor: 'rgba(51,202,185,0.5)',
                hoverBackgroundColor: "rgba(51,202,185,0.7)",
                hoverBorderColor: "rgba(0,0,0,0)",
				data: [[${total.courseTo.data}]]
			}
		]
	};
    var $dashChartLinesData = {
		labels: [[${total.monthTo.labels}]],
		datasets: [
			{
				label: '签到次数',
				data: [[${total.monthTo.data}]],
				borderColor: '#358ed7',
				backgroundColor: 'rgba(53, 142, 215, 0.175)',
                borderWidth: 1,
                fill: false,
                lineTension: 0.5
			}
		]
	};
    new Chart($dashChartBarsCnt, {
        type: 'bar',
        data: $dashChartBarsData
    });
    var myLineChart = new Chart($dashChartLinesCnt, {
        type: 'line',
        data: $dashChartLinesData,
    });
});
</script>


<script type="text/javascript" th:inline="javascript" >
    var checkId;
    var verCode;
    //打开模态框
    var openModal=function (e) {
      checkId = e.value;
      alert(checkId);
      $('#myModal').modal('show');
      //alert(verCode);
    }
    var saveCheckLog=function(){
      verCode = $("#verCode").val();
      $('#myModal').modal('hide');
      axios({
        method:'post',
        url:'/check-work-log/'+verCode,
        data:{
          checkId:checkId
        }
      }).then(
              function (response) {
                alert(response.data);
                window.location.reload();
              }
      );

    }
</script>
</body>
</html>